<template>
  <div id="historyChart" style="width: 504px; height: 255px"></div>
</template>

<script setup>
// 第三方库引用
import * as echarts from "echarts";
import { onMounted } from "vue";
// 本地引用
import { historyWarningData } from "@/store/staticData";

onMounted(() => {
  initChart();
});

const initChart = () => {
  const myChart = echarts.init(document.getElementById("historyChart"));
  const options = setOptions(historyWarningData);
  myChart.setOption(options);
};

/**
 * @description 设置echarts的option
 * @param {Object} dataSources 数据源
 * @returns {Object} echarts的option
 */
const setOptions = (dataSource) => {
  // 常量设置
  const color = ["#1890FF", "#42d7b3"];
  const legendData = Object.keys(dataSource);
  const seriesData = [];
  let index = 0;

  // 改变原始数据的数据结构，使其符合echarts的要求
  for (let key in dataSource) {
    const data = dataSource[key].map((item) => item.value);
    seriesData.push({
      name: key,
      type: "line",
      smooth: true,
      symbol: "none", // 不显示连接点
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "line", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      lineStyle: {
        width: 3,
        shadowColor: color[index],
        shadowBlur: 20,
      },
      areaStyle: {
        opacity: 1,
        //右下左上
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color:
              index === 0 ? "rgba(24, 144, 255, .5)" : "rgba(71, 176, 138, .5)",
          },
          {
            offset: 0.3,
            color:
              index === 0 ? "rgba(24, 144, 255, .2)" : "rgba(71, 176, 138, .2)",
          },
          {
            offset: 1,
            color:
              index === 0 ? "rgba(24, 144, 255, 0)" : "rgba(71, 176, 138, 0)",
          },
        ]),
      },
      data: data,
    });
    index++;
  }

  // 设置echarts的option
  const option = {
    backgroundColor: "rgba(0,0,0,0)",
    color: color,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "7%",
      right: "7%",
      bottom: "6%",
      top: "17%",
      containLabel: true,
    },
    legend: {
      icon: "rect",
      orient: "horizontal",
      left: "right",
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: "#fff",
        fontSize: "12px",
      },
      data: legendData,
    },
    xAxis: [
      {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        boundaryGap: false,
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "rgba(230, 247, 255, 0.50)",
          fontSize: 12,
        },
      },
    ],
    yAxis: [
      {
        name: "(次数)",
        type: "value",
        nameTextStyle: {
          align: "right",
          color: "rgba(230, 247, 255, 0.50)",
        },
        //y右侧文字
        axisLabel: {
          color: "rgba(230, 247, 255, 0.50)",
          fontSize: 12,
        },
        // y轴的分割线
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(230, 247, 255, 0.20)",
          },
        },
      },
    ],
    series: seriesData,
  };
  return option;
};
</script>

<style scoped lang="scss"></style>
